
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

        <title>Mobiscroll日期时间中文精简实例</title>
        <script src="js/jquery.1.7.2.min.js"></script>  
        <script src="js/mobiscroll_002.js" type="text/javascript"></script>
        <script src="js/mobiscroll_004.js" type="text/javascript"></script>
        <link href="css/mobiscroll_002.css" rel="stylesheet" type="text/css">
        <link href="css/mobiscroll.css" rel="stylesheet" type="text/css">
        <script src="js/mobiscroll.js" type="text/javascript"></script>                               
        <script src="js/mobiscroll_003.js" type="text/javascript"></script>          
        <script src="js/mobiscroll_005.js" type="text/javascript"></script>
        <link href="css/mobiscroll_003.css" rel="stylesheet" type="text/css">
        <style type="text/css">
/*            body {
                padding: 0;
                margin: 0;
                font-family: arial, verdana, sans-serif;
                font-size: 12px;
                background: #ddd;
            }*/
            input, select {
                width: 100%;
                padding: 5px;
                margin: 5px 0;
                border: 1px solid #aaa;
                box-sizing: border-box;
                border-radius: 5px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                -webkit-border-radius: 5px;
            }
/*            .header {
                border: 1px solid #333;
                background: #111;
                color: white;
                font-weight: bold;
                text-shadow: 0 -1px 1px black;
                background-image: linear-gradient(#3C3C3C,#111);
                background-image: -webkit-gradient(linear,left top,left bottom,from(#3C3C3C),to(#111));
                background-image: -moz-linear-gradient(#3C3C3C,#111);
            }
            .header h1 {
                text-align: center;
                font-size: 16px;
                margin: .6em 0;
                padding: 0;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }*/
            .content {
                padding: 15px;
                background: #fff;
            }

        </style>
    </head>

    <body>
<!--        <div class="header">
            <h1>Mobiscroll精简实例</h1>
        </div>-->

        <div class="content">

            <div class="demos">
                <label for="appDate">日期</label>
                <input value="" class="" readonly="readonly" name="appDate" id="appDate" type="text">
            </div>
            <div class="demos">
                <label for="appDateTime">日期时间</label>
                <input value="2015-05-01 15:42:02" class="" readonly="readonly" name="appDateTime" id="appDateTime" type="text">
            </div>
            <div class="demos">
                <label for="appTime">时间</label>
                <input value="16:43" class="" readonly="readonly" name="appTime" id="appTime" type="text">
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                var currYear = (new Date()).getFullYear();
                var opt = {};
                opt.date = {preset: 'date'};
                opt.datetime = {preset: 'datetime'};
                opt.time = {preset: 'time'};
                opt.default = {
                    theme: 'android-ics light', //皮肤样式
                    display: 'modal', //显示方式 
                    mode: 'scroller', //日期选择模式
                    dateFormat: 'yyyy-mm-dd',
                    lang: 'zh',
                    showNow: true,
                    nowText: "今天",
                    startYear: currYear - 10, //开始年份
                    endYear: currYear + 10 //结束年份
                };

                $("#appDate").mobiscroll($.extend(opt['date'], opt['default']));
                var optDateTime = $.extend(opt['datetime'], opt['default']);
                var optTime = $.extend(opt['time'], opt['default']);
                $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
                $("#appTime").mobiscroll(optTime).time(optTime);
            });
        </script>
    </body>
</html>